<template>
    <view>
        <view class="lifeTitle">生活指数</view>
        <swiper class="scrollContainer" circular indicator-dots="true" :autoplay="true" interval="5000" duration="500"
            indicator-active-color="#1E90FF">
            <block v-for="(item, index) in newGoodArr" :key="index">
                <swiper-item class='scrollitem'>
                    <view class="swiper-item uni-bg-red" v-for="(val, valindex) in item" :key="valindex">
                        <view class="item" @click="handlebtn(val)">
                            <image class="scrollimage" :src="val.img"></image>
                            <view class="category"> {{ val.category }}</view>
                            <view class="name"> {{ val.name.substring(0, val.name.length - 2) }}</view>
                        </view>
                    </view>
                </swiper-item>
            </block>
        </swiper>
        <mypopup :show="popShow" :popupText="popupText_doing" @confirm="confirm_doing"></mypopup>
    </view>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { lifeData } from '@/api/api.js'
import mypopup from '@/components/popup/index'
const props = defineProps({
    cityId: {
        type: String
    }
})
watch(props, (val) => {
    if (props.cityId) getlifeData(props.cityId)
})
const popShow = ref(false);
const popupText_doing = ref({});
const goodsArr = ref([]);
const newGoodArr = ref([])
const imgList = reactive({
    data: [
        { img: '../../static/yumaoqiu.png' },
        { img: '../../static/xiche.png' },
        { img: '../../static/dress.png' },
        { img: '../../static/shore__easyiconnet.png' },
        { img: '../../static/ziwaixianqiang.png' },
        { img: '../../static/lvyou.png' },
        { img: '../../static/ganmaoyaowu.png' },
        { img: '../../static/icon-test.png' },
        { img: '../../static/jiaotongxinhaodeng.png' },
        { img: '../../static/fangshai.png' },

    ]
})

// 生活指数
function getlifeData(cityID) {
    lifeData({ location: cityID }).then(res => {
        goodsArr.value = res.daily.map((item, index) => {
            return { ...item, ...imgList.data[index] };
        });
        for (let i = 0, len = Math.ceil(goodsArr.value.length / 8); i < len; i++) {
            newGoodArr.value[i] = goodsArr.value.splice(0, 8)
        }

    })
}
// 生活指数点击
function handlebtn(item) {
    popupText_doing.value = item;
    popShow.value = true;
    // console.log(item);
}

function confirm_doing(val) {
    popShow.value = val;
}


</script>
<style lang="scss" scoped>
@import './index.scss';
</style>